<template>
	<view class="hot-item flex" @tap="handleHotDetail">
		<view class="item-avatar"><image class="avatar-bb br10 mt10" :src="hot.avatar"></image></view>
		<view class="item-desc ml30">
			<view class="item-name title-color">{{ hot.username }}</view>
			<view class="item-desc line2">{{ hot.content }}</view>
			<view class="item-bottom mt20 row">
				<image class="icon-sm" src="../../static/images/cute.png"></image>
				<view class="meta-user-name meta-color mr20 sm ml10">{{ hot.thumbsupCount }}</view>
				<image class="icon-sm" src="../../static/images/comment.png"></image>
				<view class="meta-user-name meta-color mr20 sm ml10">{{ hot.commentCount }}</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'article-item',
	props: {
		hot: {
			type: Object,
			default: {}
		}
	},
	data() {
		return {};
	},
	methods: {
		handleHotDetail() {
			window.open(this.hot.url);
		}
	}
};
</script>

<style scoped lang="scss">
.hot-item {
	padding: 24rpx;
	border-bottom: solid 1rpx $-color-border;

	.avatar-bb {
		width: 100rpx;
		height: 100rpx;
	}

	.item-name {
		font-size: 32rpx;
	}

	.title-color {
		color: #1e80ff;
	}
	.meta-color {
		color: #86909c;
	}

	.item-desc {
		font-size: 30rpx;
	}
}
</style>
